<template>
	<view class="">
		<!-- 主表信息 -->
		<view class="mian-table">
			<view class="main-table-title">
				<view class="mian-table-name">
					表头信息
				</view>
			</view>
			<view class="mian-table-content">
				<formItem :formConfig='filterMainCF' :formVal='formValueMain' @searchBaseP='searchBaseP'></formItem>
			</view>
		</view>
		<!-- 子表信息 -->
		<view class="sub-table">
			<view class="sub-table-title">
				<view class="sub-table-title-name">子表信息 </view>
				<view class="sub-table-title-contrl">
					<!-- <text class="dicon diconjia-xianxingfangkuang" @click="addMater"></text>
					<text class="dicon diconsaomiao" @click="ScanEvent"></text> -->
				</view>
			</view>

			<view class="sub-table-content" v-for="(item,index) in formValueSub " :key="index" @click="activeSub(index)">
				<formItem :formConfig="filterSubCF" :formVal="item" :formIndex="index" @searchBaseP='searchBaseP'></formItem>
				<view class="flex-just-center margin-tb-sm btn-wrap">
					<button class="cu-btn round lines-blue" @click.stop="submitPrint(item)">打印</button>
				</view>
			</view>
		</view>
		
		<view class="operation">
			<view class="operation-button border-right" @click="finishSubmit">
				完成打印
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import config from '@/common/config.js'
	import formItem from '@/components/form/form_item.vue'
	import api from '@/common/api.js'
	const plug = uni.requireNativePlugin('Html5app-Gprinter');
	let _self,valueSub , activeType ,activeSubIndex , ResultData ;
	export default {
		data() {
			return {
				// config: [],
				formValueMain: '',
				formValueSub:[],
				filterMainCF:[],
				filterSubCF:[]
			}
		},
		computed: {
			...mapState(['userInfo','checkData']),
		},
		components: {
			formItem
		},
		onLoad(p) {
			_self = this
			let pararm = JSON.parse(decodeURIComponent(p.data));
			console.log(JSON.stringify(pararm));
			this.formValueMain = pararm
			this.formValueSub = pararm.DTL 
			this.initConifg()
			console.log(this.formValueMain);
			console.log(this.formValueSub);
		},
		onShow() {
			if(this.checkData.length>0){
				this.formValueSub = this.checkData 
			}
		},
		methods: {
			...mapMutations(["setCheckData"]),
			// 初始化配置数据
			initConifg() {
				let mainCF = [],subCF = [];
				config.App.cunePrintList.forEach(item=>{
					if(item.GroupID==1){
						mainCF.push(item)
					}else{
						subCF.push(item)
					}
				})
				this.filterMainCF = mainCF
				this.filterSubCF = subCF
				console.log(this.filterMainCF);
			},
			searchBaseP(){
				
			},
			// 激活的第几个子表
			activeSub(i){
				activeSubIndex = i ;
				console.log(activeSubIndex);
			},
			
			
			initForm(config){
				let valueMain = {};
				config.forEach(item => {
					valueMain[item.ID] = valueMain[item.Default] || ''
				})
				return valueMain;
			},
			
			finishSubmit(){
				uni.navigateBack({
					delta: 2
				})
				
			},
			
			// 打印 
			submitPrint(item){
				let TNT = `TYPE:3|${item.PK_ORG}|${item.PK_STORE}|${item.PK_STATION}|${item.BARCODE}`;
				let qrcodeData = {
					name: item.MATERIALNAME,
					type: item.MATSPEC,
					bcode: item.BARCODE,
					qcode: TNT,
					number:1
				}
				this.printerLable(qrcodeData)
			},
			
			printerLable(data) {
				plug.printer({
					"TSC": _self.$utils.LableSet(data)
				}, ret => {
					if (ret.state == 1) {
						return _self.$utils.tips(ret.msg)
					} else if (ret.state == 2) {
						return _self.$utils.tips('已完成打印')
					}
					console.log(JSON.stringify(ret));
				});
			},
			
		

		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 110rpx;
	}

	.mian-table {
		background-color: #ffffff;
		color: #555555;

		.main-table-title {
			margin-top: 20rpx;
			padding: 30rpx 24rpx;
			border-bottom: 1rpx solid #f1f1f1;

			.mian-table-name {
				font-weight: 800;
				font-size: 32rpx;
				position: relative;
				padding-left: 40rpx;
			}

			.mian-table-name:before {
				content: "";
				width: 10rpx;
				height: 32rpx;
				line-height: 32rpx;
				position: absolute;
				margin: 0 16rpx;
				border-radius: 10rpx;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background-color: #1677ff;
			}
		}

		.mian-table-content {
			padding: 0 30rpx;
		}
	}

	.sub-table {
		color: #555555;

		.sub-table-title {
			background-color: #ffffff;
			display: flex;
			margin-top: 20rpx;
			padding: 30rpx 24rpx;
			border-bottom: 1rpx solid #f1f1f1;
			justify-content: space-between;
			align-items: center;

			.sub-table-title-name {
				font-weight: 800;
				font-size: 32rpx;
				position: relative;
				padding-left: 40rpx;
			}

			.sub-table-title-name:before {
				content: "";
				width: 10rpx;
				height: 32rpx;
				line-height: 32rpx;
				position: absolute;
				margin: 0 16rpx;
				border-radius: 10rpx;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background-color: #1677ff;
			}

			.dicon {
				font-size: 50rpx;
				margin: 0 10rpx;
			}
		}

		.sub-table-content {
			margin-top: 20rpx;
			background-color: #ffffff;
			padding: 0 30rpx;
		}
	}
</style>
